<template>
  <div>
    <!-- 1.0 导航栏 -->
    <van-nav-bar
      title="栏目管理"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- 2.0 删除频道模块 -->
    <div class="manage">
      <h3 class="manage_title">点击删除以下频道</h3>
      <ul class="manage_list">
        <li
          class="manage_item"
          v-for="(item,index) in activeList"
          :key="item.id"
          @click="removeItemHandle(index)"
        >{{item.name}}</li>
      </ul>
    </div>
    <!-- 3.0 添加频道模块 -->
    <div
      class="manage"
      v-show="disActiveList.length"
    >
      <h3 class="manage_title">点击添加以下频道</h3>
      <ul class="manage_list">
        <li
          class="manage_item add_item"
          v-for="(item,index) in disActiveList"
          :key="item.id"
          @click="addItemHandle(index)"
        >{{ item.name }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getCategory } from "@/api";
import { getManage, setManage } from "@/utils/local";
export default {
  data() {
    return {
      // 选择的栏目
      activeList: [],
      // 没选择的栏目
      disActiveList: [],
    };
  },
  watch: {
    // 这里监听其中一个变量即可，因为两个栏目的数据其实是互相影响的
    activeList() {
      // 当变量发生变化是，重新把数据更新到本地存储即可
      setManage({
        activeList: this.activeList,
        disActiveList: this.disActiveList,
      });
    },
  },
  created() {
    // 获取本地存储中是否已经有 栏目 数据  { activeList:[], disActiveList:[] }
    const { activeList, disActiveList } = getManage();
    if (activeList) {
      console.log("情况1：使用本地存储的数据即可");
      this.activeList = activeList;
      this.disActiveList = disActiveList;
    }
    // 如果本地存储没有 栏目数据的时候，才发送请求获取
    else {
      console.log("情况2：第一次需要通过网络请求获取栏目数据");
      // 默认情况下，获取到的所有栏目分类都是活跃状态的
      getCategory().then((res) => {
        // console.log(res.data);
        this.activeList = res.data.data;
        // 更新到本地存储中，🧨注意：要保存数据格式统一，disActiveList 需要设置为空数组
        setManage({ activeList: res.data.data, disActiveList: [] });
      });
    }
  },
  methods: {
    // 移除某个关注栏目
    removeItemHandle(index) {
      // 至少确保有一项是选中的，否则就没有新闻数据了
      if (this.activeList.length === 1) {
        return this.$toast("至少保留一个栏目");
      }
      // 从用户选择的栏目列表中，根据索引值把某个栏目删除掉，并接收删除项
      const res = this.activeList.splice(index, 1);
      // 由于删除项返回值是数组，需要先展开再添加到不选择栏目列表
      this.disActiveList.push(...res);
    },
    // 添加到关注栏目列表
    addItemHandle(index) {
      // 参考之前实现的业务
      const res = this.disActiveList.splice(index, 1);
      this.activeList.push(...res);
    },
  },
};
</script>

<style lang="less" scoped>
.manage {
  padding: 10px;
  .manage_title {
    font-weight: normal;
    font-size: 13px;
    line-height: 30px;
  }
  .manage_list {
    display: flex;
    flex-wrap: wrap;
    .manage_item {
      height: 30px;
      width: 23%;
      margin: 1%;
      border: 1px solid #ccc;
      font-size: 14px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      &.add_item::after {
        content: "+";
        position: absolute;
        right: 0;
        top: 0;
        width: 10px;
        height: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>
